<div ngAccordionGroup class="retro-accordion" [multiExpandable]="false">
  <h3>
    <span ngAccordionTrigger panelId="q1" #trigger1="ngAccordionTrigger">
      Unlock Treasure Box
      <span
        aria-hidden="true"
        class="material-symbols-outlined"
        translate="no"
        >{{trigger1.expanded() ? 'lock_open_right' : 'lock'}}</span
      >
    </span>
  </h3>
  <div ngAccordionPanel panelId="q1">
    <ng-template ngAccordionContent>
      <div class="treasure-box">👻</div>
    </ng-template>
  </div>

  <h3>
    <span ngAccordionTrigger panelId="q2" #trigger2="ngAccordionTrigger">
      Unlock Treasure Box
      <span
        aria-hidden="true"
        class="material-symbols-outlined"
        translate="no"
        >{{trigger2.expanded() ? 'lock_open_right' : 'lock'}}</span
      >
    </span>
  </h3>
  <div ngAccordionPanel panelId="q2">
    <ng-template ngAccordionContent>
      <div class="treasure-box">💎💎💎</div>
    </ng-template>
  </div>

  <h3>
    <span ngAccordionTrigger panelId="q3" #trigger3="ngAccordionTrigger">
      Unlock Treasure Box
      <span
        aria-hidden="true"
        class="material-symbols-outlined"
        translate="no"
        >{{trigger3.expanded() ? 'lock_open_right' : 'lock'}}</span
      >
    </span>
  </h3>
  <div ngAccordionPanel panelId="q3">
    <ng-template ngAccordionContent>
      <div class="treasure-box">🐸 ribbit...ribbit...</div>
    </ng-template>
  </div>
</div>
